import React, { useEffect, useState } from "react"
import { Button } from "antd"
import "./index.less"
import salesman from "../../images/common/007-share-1.svg"
import product from "../../images/common/021-shopper.svg"
import commission from "../../images/common/018-discount.svg"
import { get } from "../../../src/shared/server";
import { HOST } from "project-config";

export default () => {
	const [templateUrl, setTemplateUrl] = useState(null);
	useEffect(() => {
		get("/management/common/templates").then(response => {
			setTemplateUrl(response);
		})
	}, [])

	return (
		<div className={'template-down-page page-bg'}>
			<div className={'account-page-title'}>选择要下载的模板</div>
			<div className={'template-down-page-box'}>
				<div className={'account-type-store box-bg'}>
					<div className={'account-title'}>业务员</div>
					<div className={'account-img-box'}>
						<img src={salesman} />
					</div>
					<div className={'account-description'}>
						下载后编辑导入业务员资料
					</div>
					<a target="_blank" download href={templateUrl && `${HOST}${templateUrl["salesman"]}`}>
						<Button size={'large'} type={'link'}>
							立即下载
						</Button>
					</a>
				</div>

				<div className={'account-type-marker box-bg'}>
					<div className={'account-title'}>产品</div>
					<div className={'account-img-box'}>
						<img src={product} />
					</div>
					<div className={'account-description'}>
						下载后编辑导入产品资料
					</div>
					<a target="_blank" download href={templateUrl && `${HOST}${templateUrl["product"]}`}>
						<Button size={'large'} type={'link'}>
							立即下载
						</Button>
					</a>
				</div>

				<div className={'account-type-marker box-bg'}>
					<div className={'account-title'}>提成率</div>
					<div className={'account-img-box'}>
						<img src={commission} />
					</div>
					<div className={'account-description'}>
						下载后编辑导入提成率
					</div>
					<a target="_blank" download href={templateUrl && `${HOST}${templateUrl["commission"]}`}>
						<Button size={'large'} type={'link'}>
							立即下载
						</Button>
					</a>
				</div>
			</div>
		</div>
	)
}